<template name="music">

  <view class="music" title="接下来如何">

    <view class="music_left" @click="musicView">
      <image :src="imgUrl"></image>
    </view>
    <view class="music_right">
      <image @click="musicView" class="music_right_black" src="/static/my/black-tap.png"></image>
      <view @click="musicView">{{mus_title}}</view>
      <image @click="music" class="music_right_img" :src="music_static==true?'/static/my/stop.png':'/static/my/play.png'"></image>
      <image class="music_right_img" src="/static/my/music-list.png"></image>
    </view>

  </view>

</template>

<script>
  export default {
    name: "music",
    data() {
      return {
        mus_src: "",
        mus_title: "听我想听",
        imgUrl: "/static/my/music-icon.png",
        song_word:'',
        songer:"",
        music_static:true,
        set_object:"",
      };
    },
    mounted:async function(){
      if(uni.getStorageSync('song_history')==""){
        //没有歌曲无法播放
        console.log("没有歌曲无法播放")
      }else {
        let value=await JSON.parse(uni.getStorageSync('song_history'))
        if(value.length==1){
          this.mus_title=value[0].song_title
          this.mus_src=value[0].song_src
          this.songer=value[0].song_singer
          this.imgUrl=value[0].song_image
        }else if(value.length>1){
          this.mus_title=value[value.length-1].song_title
          this.mus_src=value[value.length-1].song_src
          this.songer=value[value.length-1].song_singer
          this.imgUrl=value[value.length-1].song_image
        }else{
          console.log("没有任何历史记录")
        }
        this.$store.commit('setSong_title',this.mus_title)
        this.$store.commit('setSong_singer',this.songer)
        this.$store.commit('setSong_imgurl',this.imgUrl)
        this.$store.commit('setSong_src',this.mus_src)
      }
    },
    onReady() {
      clearInterval(this.set_object)
      this.set_object=setInterval(async ()=>{
        this.music_static=this.$store.state.song_play_static
        this.mus_title=this.$store.state.song_title
        this.songer=this.$store.state.song_singer
        this.imgUrl=this.$store.state.song_imgurl
      },500)
    },
    methods: {
      music(e) {
        let aa=uni.getBackgroundAudioManager()
          if(aa!=""){
              
            if(aa.paused==true){  //暂停的时候
                this.$store.commit('setSong_play_static',false)
                this.music_static=false
                //播放歌曲
                aa.play()
            }else if(aa.paused==false){
               this.$store.commit('setSong_play_static',true)
               this.music_static=true
               aa.pause()   //播放的时候暂停
            }else {
               this.music_static=false
               this.$music(this.$store.state.song_src, this.$store.state.song_title, this.$store.state.song_singer, this.$store.state.song_imgurl)
            }
            
          }else {
            console.log('获取背景音乐对象失败，对象为空')
          }
      },
      musicView(e) {
          this.$store.commit('setSong_title',this.mus_title)
          this.$store.commit('setSong_singer',this.songer)
          this.$store.commit('setSong_imgurl',this.imgUrl)
          this.$store.commit('setSong_src',this.mus_src)
          this.$store.commit('setSong_word','')
          setTimeout(()=>{
            uni.navigateTo({
              url: "/pages/musicpage/musicpage"
            })
          },300)
        
      }
    },

  }
</script>

<style lang="scss">
  /* play_music/music.wxss */
  .music {
    width: 92%;
    margin-left:5%;
    position: fixed;
    display: flex;
    bottom: 0;
    left: 0;
    right: 0;
    flex-direction: row;
    align-items: flex-end;
    height: 100rpx;

    .music_left {
      position: relative;
      z-index: 20;
      background-color: #312D2C;
      height: 100rpx;
      width: 110rpx;
      overflow: hidden;
      border-radius: 5px;

      >image {
        position: absolute;
        height: 100rpx;
        width: 110rpx;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .music_right {
      position: relative;
      left: -7rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      background-image: linear-gradient(80deg, #181818 4px, #312D2C 30rpx);
      height: 90rpx;
      width:80%;
      padding-right: 5%;
      border-top-right-radius: 60rpx;
      border-bottom-right-radius: 60rpx;

      .music_right_black {
        padding: 0 0 10rpx 7rpx;
        height: 80rpx;
        width: 30rpx;
      }

      >view {
        font-size: 30rpx;
        margin: 0 20rpx;
        width: 70%;
        height: 40rpx;
        overflow-x: scroll;
        white-space: nowrap;
        color: white;

        &::-webkit-scrollbar {
          /* 更改滚动条大小 */
          width: 0;
          height: 0;
        }
      }

      .music_right_img {
        width: 14%;
        height: 62rpx;
        margin-right: 15rpx;
      }

      image:nth-child(3) {
        margin-right: 25rpx;
      }
    }
  }
</style>
